<template>
  <div>
    <t-dialog
      header="新增员工"
      :visible.sync="visible"
      @confirm="onConfirm"
      :onConfirm="onConfirmAnother"
      :onCancel="onCancel"
      :onEscKeydown="onKeydownEsc"
      :onCloseBtnClick="onClickCloseBtn"
      :onOverlayClick="onClickOverlay"
      :onClose="close"
      :top="top"
    >
        <div slot="body">
           <t-form :data="formData" ref="form" :rules="rules" @reset="onReset" @submit="onSubmit" :colon="true" statusIcon>
                <t-form-item label="头像" name="file1" successBorder>
                    <t-upload
                        action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                        v-model="formData.file1"
                        @fail="handleFail"
                        theme="image"
                        :tips="tips"
                        accept="image/*"
                    ></t-upload>
                </t-form-item>
                <t-form-item label="员工编号" name="EmployeeSerial" successBorder>
                    <t-input v-model="formData.EmployeeSerial" placeholder="请输入内容"></t-input>
                </t-form-item>
                <t-form-item label="员工姓名" name="name" successBorder>
                    <t-input v-model="formData.name" placeholder="请输入内容"></t-input>
                </t-form-item>
                <t-form-item label="员工岗位" name="Employeejobs" successBorder>
                    <t-input v-model="formData.Employeejobs" placeholder="请输入内容"></t-input>
                </t-form-item>
                <t-form-item label="入职日期" name="inductiontime" successBorder>
                    <t-date-picker
                        v-model="formData.inductiontime"
                        mode="date"
                        format="YYYY-MM-DD HH:mm:ss"
                        enableTimePicker
                    />
                </t-form-item>
                <t-form-item label="联系方式" name="contact" successBorder>
                    <t-input v-model="formData.contact" placeholder="请输入内容"></t-input>
                </t-form-item>
                <t-form-item label="现居住地" name="latter" successBorder>
                    <t-input v-model="formData.latter" placeholder="请输入内容"></t-input>
                </t-form-item>
                <t-form-item label="身份证件" name="file2" successBorder>
                    <div>
                        <t-upload
                            action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                            v-model="formData.file2"
                            @fail="handleFail"
                            theme="image"
                            tips="请上传身份证正面"
                            accept="image/*"
                        ></t-upload>
                    </div>
                     <div>
                        <t-upload
                            action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                            v-model="formData.file3"
                            @fail="handleFail"
                            theme="image"
                            tips="请上传身份证反面"
                            accept="image/*"
                        ></t-upload>
                    </div>
                </t-form-item>
                <t-form-item label="其他证件" name="file4" successBorder>
                    <t-upload
                            action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                            v-model="formData.file4"
                            @fail="handleFail"
                            theme="image"
                            tips="请上传其他证件照片"
                            accept="image/*"
                        ></t-upload>
                </t-form-item>
            </t-form>
        </div>
    </t-dialog>
  </div>
</template>

<script>
const INITIAL_DATA = {
  file1: [], // 头像上传
  file2: [], // 上传的身份证正面
  file3: [], // 上传的身份证反面
  file4: [], // 其他证件照片
//   time: ['14:22:22',"12:30:33"], // 时长
  EmployeeSerial: '', // 员工编号
  name: '', // 员工姓名
  Employeejobs: '', // 员工岗位
  inductiontime: '2021-05-01 11:30:20', // 入职日期
  contact: '', //  联系方式
  dmscript: '', // dm剧本
//   status: false,
};

export default {
    name : 'addemployees',
    data() {
        return {
            visible:false, // 关闭弹框
            formData: { ...INITIAL_DATA }, // form表单数据
            tips: '添加员工证件照', // 上传图片提示
            // 表单的校验
            rules: {
                file1: [{ required: true, message: '头像必需上传', type: 'error' }],
                EmployeeSerial: [{ required: true, message: '员工编号必填', type: 'error' }],
                name: [{ required: true, message: '员工姓名必填', type: 'error' }],
                Employeejobs: [{ required: true, message: '员工岗位必填', type: 'error' }],
                inductiontime: [{ required: true, message: '入职日期必填', type: 'error' }],
                contact: [{required: true, message: '联系方式必填', type: 'error'}],
                file2: [{required: true, message: '身份证正反面必须上传必填', type: 'error'}],
            },
            top: '70px', // 自定义对话框的高度
        }
    },
    methods: {
        // 重置方法：this.$refs.reset()
        onReset() {
            this.$message.success('重置成功');
        },

         // 提交方法：this.$refs.submit()
        onSubmit({ validateResult, firstError }) {
            // this.$refs.form.validate()
            // console.log(validateResult);
            // validateResult为表单校验true则校验成功
            if (validateResult == true) {
                this.$message.success('新增剧本成功')
                this.$router.push('/detail/scriptdata')
            } else {
                this.$message.error('请检查必填项')
            }
            // console.log(validateResult, firstError);
        },

        // formatResponse 返回后的 url 优先级高于接口返回的 url
        formatImgResponse() {
            return { url: 'https://tdesign.gtimg.com/site/avatar.jpg' };
        },

        // 一旦 formatResponse 返回值包含 error，便会被组件判定为上传失败
        formatResponse() {
            return { error: '网络异常，图片上传失败' };
        },

        handleFail({ file }) {
            this.$message.error(`文件 ${file.name} 上传失败`);
        },

        onConfirm(context) {
            console.log('@confirm与onConfirm任选一种方式即可，其他几个事件类似', context);
            this.visible = false;
        },
        onConfirmAnother(context) {
            // 发送请求
            this.visible = false;
            this.$message.success('员工新增成功')
            // console.log('点击了确认按钮', context);
            this.$emit('ConfirmAnother')
        },
        close(context) {
            console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
        },
        onCancel(context) {
            console.log('点击了取消按钮', context);
        },
        onKeydownEsc(context) {
            console.log('按下了ESC', context);
        },
        onClickCloseBtn(context) {
            console.log('点击了关闭按钮', context);
        },
        onClickOverlay(context) {
            console.log('点击了蒙层', context);
        },
    }
}
</script>

<style>

</style>